<template>
    <n-card>
        <n-collapse>
            <n-collapse-item title="搜索">
                <n-form
                    label-placement="left"
                    class="w-full flex justify-around mb-20px"
                    :show-feedback="false"
                >
                    <n-grid :cols="4" :x-gap="30">
                        <n-form-item-gi label="用户名">
                            <n-input
                                v-model:value="userSearchContent.userName"
                                placeholder="搜索用户名..."
                            />
                        </n-form-item-gi>
                        <n-form-item-gi
                            label="邮箱"
                            v-if="model === 'customer'"
                        >
                            <n-input
                                v-model:value="userSearchContent.email"
                                placeholder="搜索邮箱..."
                            />
                        </n-form-item-gi>
                        <n-form-item-gi label="注册时间">
                            <n-date-picker
                                v-model:value="daterange"
                                type="daterange"
                                clearable
                            />
                        </n-form-item-gi>
                        <n-form-item-gi label="是否冻结">
                            <n-select
                                v-model:value="userSearchContent.frozen"
                                :options="selectOptions"
                            />
                        </n-form-item-gi>
                    </n-grid>
                </n-form>
                <div class="w-full flex justify-end gap-10px">
                    <n-button :focusable="false" @click="handleReset">
                        <template #icon>
                            <n-icon :component="Reload" />
                        </template>
                        重置
                    </n-button>
                    <n-button :focusable="false" @click="handleSubmit">
                        <template #icon>
                            <n-icon :component="Search" />
                        </template>
                        查找
                    </n-button>
                </div>
            </n-collapse-item>
        </n-collapse>
    </n-card>
</template>

<script lang="ts" setup>
import { ref, reactive, watch } from "vue";
import { Search, Reload } from "@vicons/ionicons5";

import { UserSearchDto } from "@/service/api/dto/user.dto.ts";

import { throttle } from "radash";

const props = defineProps<{
    model: "admin" | "customer";
}>();

const emits = defineEmits<{
    (e: "submit", value: Partial<UserSearchDto>): void;
    (e: "reset"): void;
}>();

const selectOptions = [
    { label: "是", value: 1 },
    { label: "否", value: 0 },
];

const emptySearchContent: UserSearchDto = {
    email: null,
    userName: null,
    frozen: null,
    startDate: null,
    endDate: null,
};
const daterange = ref<[number, number] | null>(null);

watch(daterange, (val) => {
    if (val) {
        userSearchContent.startDate = val[0];
        userSearchContent.endDate = val[1];
    } else {
        userSearchContent.startDate = null;
        userSearchContent.endDate = null;
    }
});

const userSearchContent = reactive(structuredClone(emptySearchContent));

const handleReset = () => {
    Object.assign(userSearchContent, structuredClone(emptySearchContent));
    daterange.value = null;

    emits("reset");
};

const handleSubmit = throttle({ interval: 1000 }, () => {
    if (
        JSON.stringify(emptySearchContent) === JSON.stringify(userSearchContent)
    ) {
        window.NMessage.warning("请输入搜索条件");
        return;
    }
    const filter = Object.fromEntries(
        Object.entries(userSearchContent).filter(
            ([_, value]) => value !== null && value !== ""
        )
    );
    emits("submit", filter);
});
</script>

<style scoped></style>
@/service/api/dto/user.dto
